<!DOCTYPE html>
<html>
<head>
    <title>Simple AutoML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- styles -->
    <link href="css/style.css" rel="stylesheet">
    <link rel="shortcuticon" href="favicon.ico"/>
    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/simple.js"></script>
    <script src="js/version.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Simple AutoML</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a id="version" href="#"></a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="jumbotron">
        <h1>Welcome to Simple AutoML!</h1>
        <p> - Now, you can create a task.</p>
        <p> - start it!</p>
            <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#addTask">Create
                Task
            </button>
            <div class="btn-group pull-right">
            <button type="button" class="btn btn-lg btn-primary dropdown-toggle" data-toggle="dropdown">Sample data set download
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="/api/v1/automl/dataset/Sample_boston_data_set.csv">Sample_boston_data_set.csv</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="/api/v1/automl/dataset/Sample_iris_data_set.csv">Sample_iris_data_set.csv</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="/api/v1/automl/dataset/breast_cancer_C.csv">breast_cancer_C.csv</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="/api/v1/automl/dataset/linnerud_MR.csv">linnerud_MR.csv</a>
                </li>
            </ul>
            </div>

    </div>
    <div class="row">
        <div class="col-md-12" id="task_table">
        </div>
    </div>
</div>

<footer class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="row panel-body">
            <ul class="list-inline text-center">
                <li>Simple AutoML</li>
                <li><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备19050377号</a>
                </li>
            </ul>
        </div>
    </div>
</footer>


<div class="modal fade" id="addTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="addNewTask">
                    New Task
                </h4>
            </div>
            <form id="add_task_form" role="form" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">task name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="task_name" id="task_name"
                                   placeholder="please input task name.">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">data set</label>
                        <div class="col-sm-8">
                            <input class="form-control" name="file" type="file" id="inputfile">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">time max</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="time_max" id="time_max"
                                   placeholder="300">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">select task type</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="model_type">
                                <option>Classification</option>
                                <option>Regression</option>
                                <option>TimeSeriesPrediction</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">hyperparameters</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" name="hyper_parameters" rows="5"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">close
                    </button>
                    <button type="button" onclick="add_task()" class="btn btn-primary">
                        submit
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script>
    function task_detail(obj) {
        var id = $(obj).parents("tr").find(".taskID").text();
        window.open("/preview.html?task_id=" + id);
    }
    function task_delete(obj) {
        var task_id = $(obj).parents("tr").find(".taskID").text();
        $.ajax({
            url: "api/v1/automl/task/" + task_id,
            type: "delete",
            success: function () {
                location.reload(true);
            },
            error: function (data) {
                alert(data["msg"]);
            }
        });
    }
    function add_task() {
        var form = new FormData(document.getElementById("add_task_form"));
        $.ajax({
            url: "api/v1/automl/task",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function () {
                location.reload(true);
            },
            error: function (data) {
                alert(data["msg"]);
            }
        });
    }
</script>

</body>
</html>